<template>
  <div class="wh100p">
    <div>
      <!-- 日期 加 时间 范围选择  -->
      <a-range-picker
        :allowClear="false"
        v-if="option.type=='dayTime'"
        format="YYYY/MM/DD"
        :placeholder="['开始时间', '结束时间']"
        :value="timeObj[option.type].rangetime"
        @change="onOk"
        @calendarChange="onOk"
        :disabled-date="disabledDate"
      >
        <a-icon
          slot="suffixIcon"
          type="calendar"
        />
      </a-range-picker>
      <!-- 月份区间 选择 -->
      <a-range-picker
        v-show="option.type=='monthTimeRange'"
        :allowClear="false"
        format="YYYY-MM"
        :renderExtraFooter="extraBox"
        >
        <a-icon
          slot="suffixIcon"
          type="calendar"
        />
      </a-range-picker>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: {
    option: {
      type: Object,
      default: () => {
        return {
          type: "dayTime",
          rangetime: []
        };
      }
    }
  },
  data() {
    return {
      open_monthTime: false,
      mode2: ["month", "month"],
      moment,
      timeObj: {
        dayTime: {
          rangetime: []
        },
        monthTimeRange: {
          rangetime: [],
          rangetime_value:[]
        }
      }
    };
  },
  methods: {
    extraBox(){
      return <span>123</span>
    },
    handlePanelChange2(value, mode) {
      // this.value = value;
      console.log(value, mode, this.open_monthTime, this, moment("2021/10/10"));
      this.open_monthTime = false;
      this.timeObj[this.option.type].rangetime_value = value;
      this.mode2 = [
        mode[0] === "date" ? "month" : mode[0],
        mode[1] === "date" ? "month" : mode[1]
      ];
      // 要判断两个日期 之间 是否 是36个月
      let cc = moment(value[0]).format("Y/MM/DD");
      let dd = moment(value[1]).format("Y/MM/DD");
      let f = this.$common.time.getMonths(cc, dd);
      let nowT = moment().format("Y/MM/DD");
      let cc_temp = Date.parse(new Date(cc)) / 1000;
      let dd_temp = Date.parse(new Date(dd)) / 1000;
      let nowT_t = Date.parse(new Date(nowT)) / 1000;
      console.log(cc_temp, dd_temp, nowT_t, "nowT_tnowT_t");

      //  要判断所选时间不能大于当前 时间
      if (f.field.length > 36) {
        this.$message.warning("所选月份区间不能大于36个月");
      } else if (cc_temp > nowT_t || dd_temp > nowT_t) {
        this.$message.warning("所选月份不能大于当前月份");
      } else {
        this.timeObj[this.option.type].rangetime = [cc, dd];
      }
    },
    disabledMonth(current) {
      return current && current > moment().endOf("month");
    },
    onOk(value) {
      if (value) {
        this.timeObj[this.option.type].rangetime = [
          value[0] && value[0].format("YYYY/MM/DD"),
          value[1] && value[1].format("YYYY/MM/DD")
        ];

        if (value && value[0] && value[1]) {
          let f = this.$common.time.getdiffdate(
            this.timeObj[this.option.type].rangetime[0],
            this.timeObj[this.option.type].rangetime[1]
          );
        }
      }
    },
    disabledDate(current) {
      let rangetime = this.timeObj[this.option.type].rangetime;
      let isDis = false;
      if (rangetime[0] && !rangetime[1]) {
        // 这是有开始时间 没有结束时间
        // 最长跨度90天 又开始时间 获取 前后90天的值
        let now_t = this.$common.common.getNodeDay("", rangetime[0]);
        let pro14 = now_t.getDayBefore_X_Date(90);
        let aft14 = now_t.getDayNumDate(90);
        let pro14_temp = Date.parse(new Date(pro14)) / 1000;
        let aft14_temp = Date.parse(new Date(aft14)) / 1000;
        let cc = moment(current).format("Y/M/D");
        let need_t = Date.parse(new Date(cc)) / 1000;

        if (!(need_t > pro14_temp && need_t < aft14_temp)) {
          isDis = true;
        }
      }
      return (current && current > moment().endOf("day")) || isDis;
    }
  }
};
</script>

<style lang="less" scoped>
</style>